<template>
  <div class="panel-wrap">
    <a-form-model :model="model" :label-col="labelCol" :wrapper-col="wrapperCol">
      <div class="panel-title">线条</div>
      <a-form-model-item label="宽度" prop="strokeWidth" v-if="shapeType === 'edge'">
        <slider :min="1" :max="6" :step="1" v-model="model.strokeWidth" @change="onStrokeWidthChange" />
      </a-form-model-item>
      <a-form-model-item label="类型" prop="lineType">
        <a-select style="width: 100%" v-model="model.lineType" @change="onTypeChange">
          <a-select-option v-for="item in lineTypeList" :value="item.type" :key="item.type">
            <img :src="item.src" />
          </a-select-option>
        </a-select>
        <!-- <slider :min="0" :max="6" :step="1" :value="model.strokeDasharray" @change="onStrokeDasharrayChange" /> -->
      </a-form-model-item>
      <a-form-model-item label="箭头" style="margin: 0" :auto-link="false">
        <a-row>
          <a-col :span="11">
            <a-form-model-item prop="sourceArrow">
              <a-select style="width: 100%" v-model="model.sourceArrow" @change="onSourceArrowChange">
                <a-select-option v-for="item in arrowList" :value="item.type" :key="item.type">
                  <img :src="item.src" class="arrow-source" />
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="11" :offset="2">
            <a-form-model-item prop="targetArrow">
              <a-select style="width: 100%" v-model="model.targetArrow" @change="onTargetArrowChange">
                <a-select-option v-for="item in arrowList" :value="item.type" :key="item.type">
                  <img :src="item.src" />
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item label="颜色" prop="stroke">
        <!-- <a-input type="color" :value="model.stroke" style="width: 100%" @change="onStrokeChange" /> -->
        <c-color-picker v-model="model.stroke" @change="onStrokeChange" />
      </a-form-model-item>
      <a-form-model-item label="连线" prop="connector">
        <a-select
          style="width: 100%"
          :options="connectorOptions"
          v-model="model.connector"
          @change="onConnectorChange"
        />
      </a-form-model-item>
      <a-form-model-item label="路由" prop="router">
        <a-select style="width: 100%" :options="routerOptions" v-model="model.router" @change="onRouterChange" />
      </a-form-model-item>
      <a-form-model-item label="层级" prop="zIndex">
        <a-space>
          <a-button icon="vertical-align-top" @click="handleToFront" title="最顶层" />
          <a-button icon="vertical-align-bottom" @click="handleToBack" title="最底层" />
          <a-button type="link" @click="toggleZIndexSlider">{{ showZIndexSlider ? '收起' : '' }}精确设置</a-button>
        </a-space>
        <slider
v-if="showZIndexSlider"
:min="1"
:max="99"
:step="1"
v-model="model.zIndex"
@change="onZIndexChange" />
      </a-form-model-item>
      <a-form-model-item label="标签" prop="label">
        <a-input v-model="model.label" style="width: 100%" @change="onLabelChange" />
      </a-form-model-item>
      <!-- <a-row align="middle">
        <a-col :span="6">开启链接</a-col>
        <a-col :span="16">
          <a-switch
            :value="model.magnet"
            @change="onMagnetChange"
            checked-children="是"
            un-checked-children="否"
          />
        </a-col>
      </a-row> -->
    </a-form-model>
    <a-button type="danger" block icon="delete" @click="handleRemove">删除</a-button>
  </div>
</template>

<script>
import Slider from '../../Slider'
import { changeEdgeArrow, changeEdgeType, changeStrokeWidthAndArrow } from './method'
import { connectorOptions, doubleEdgeArrowTypes, edgeArrowTypes, lineTypeList, routerOptions } from './options'

export default {
  name: 'ConfigEdge',
  components: {
    Slider
  },
  props: {
    globalGridAttr: {
      type: Object,
      default: null,
      require: true
    },
    cell: null
  },
  data() {
    return {
      lineTypeList,
      routerOptions,
      connectorOptions,
      curCell: null,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      showZIndexSlider: false,
      model: {
        lineType: '',
        strokeWidth: 1,
        stroke: '',
        targetArrow: undefined,
        sourceArrow: undefined,
        router: undefined,
        connector: undefined,
        label: '',
        zIndex: 0
      }
    }
  },
  computed: {
    shapeType() {
      return this.cell && this.cell.shape
    },
    arrowList() {
      return this.shapeType === 'double-edge' ? doubleEdgeArrowTypes : edgeArrowTypes
    }
  },
  watch: {
    cell: {
      handler(cell) {
        if (!cell || !cell.isEdge()) {
          return
        }
        const connector = cell.getConnector() || {
          name: 'normal'
        }
        const targetMarker = cell.attr('line/targetMarker')
        const sourceMarker = cell.attr('line/sourceMarker')
        let strokeDasharray = 0
        if (cell.shape === 'edge') {
          this.model.stroke = cell.attr('line/stroke')
          this.model.strokeWidth = cell.attr('line/strokeWidth')
          this.model.targetArrow = targetMarker && targetMarker.name ? targetMarker.name : 'none'
          this.model.sourceArrow = sourceMarker && sourceMarker.name ? sourceMarker.name : 'none'
          strokeDasharray = cell.attr('line/strokeDasharray') || 0
        } else {
          this.model.stroke = cell.attr('outline/stroke')
          this.model.strokeWidth = cell.attr('outline/strokeWidth')
          this.model.targetArrow = !targetMarker ? 'none' : 'default'
          this.model.sourceArrow = !sourceMarker ? 'none' : 'default'
          strokeDasharray = cell.attr('outline/strokeDasharray') || 0
        }
        this.model.lineType = `${cell.shape},${strokeDasharray}`
        this.model.router = (cell.getRouter() || { name: 'normal' }).name
        this.model.connector = connector.name
        this.model.label = cell.getLabels()[0]?.attrs.text.text || ''
        this.model.magnet = cell.attr('body/magnet') || false
        console.log(this.model, cell)
      }
    }
  },
  methods: {
    onStrokeWidthChange(val) {
      changeStrokeWidthAndArrow(this.cell, val, this.model.lineType)
    },
    onStrokeChange(val) {
      // const val = e.target.value
      if (this.shapeType === 'edge') {
        this.cell.attr('line/stroke', val)
      }
      if (this.shapeType === 'double-edge') {
        this.cell.attr('line/targetMarker/stroke', val)
        this.cell.attr('outline/stroke', val)
      }
    },
    onTargetArrowChange(val) {
      changeEdgeArrow(val, this.cell)
    },
    onSourceArrowChange(val) {
      changeEdgeArrow(val, this.cell, false)
    },
    onStrokeDasharrayChange(val) {
      if (this.shapeType === 'edge') {
        this.cell.attr('line/strokeDasharray', val)
      }
      if (this.shapeType === 'double-edge') {
        this.cell.attr('outline/strokeDasharray', val)
      }
    },
    onMagnetChange(bool) {
      this.cell.attr('body/magnet', bool)
    },
    onTargetMarkerSizeChange(val) {
      this.cell.attr('line/targetMarker/size', parseInt(val, 10))
    },
    onConnectorChange(val) {
      this.cell.setConnector(val)
    },
    onTypeChange(val) {
      changeEdgeType(val, this.cell)
    },
    onRouterChange(val) {
      this.cell.setRouter(val)
    },
    onLabelChange(e) {
      const val = e.target.value
      this.cell.setLabels([
        {
          attrs: {
            text: {
              text: val
            }
          },
          position: {
            distance: 0.5
          }
        }
      ])
    },
    handleRemove() {
      this.cell.remove()
    },
    onZIndexChange(val) {
      this.cell.setZIndex(val)
    },
    handleToFront() {
      this.cell.toFront()
    },
    handleToBack() {
      this.cell.toBack()
    },
    toggleZIndexSlider() {
      this.model.zIndex = this.cell.getZIndex()
      this.showZIndexSlider = !this.showZIndexSlider
    }
  }
}
</script>

<style lang="less" scoped>
@import '../style.less';

.arrow-source {
  transform: rotate(180deg);
}
</style>
